<template>
 <div class="relative">
   <div
    style="width: 500px; margin-top:200px;"
    class="flex flex-column absolute positionCenter">
     <h3 class="f18 tc mb-10">管理系统登录</h3>
     <div class="flex flex-column align-center justify-center">
       <p class="tc mb-10">欢迎来到苏苏生鲜后台管理系统</p>
       <Form ref="formData" :model="formData" :rules="ruleDate">
        <FormItem prop="username">
          <Input type="text" v-model="formData.username" placeholder="请输入管理员账号" style="width:300px">
            <Icon type="ios-person-outline" slot="prepend"></Icon>
          </Input>
        </FormItem>
        <FormItem prop="password">
          <Input type="password" v-model="formData.password" placeholder="请输入密码" style="width:300px">
            <Icon type="ios-lock-outline" slot="prepend"/>
          </Input>
        </FormItem>
       </Form>
       <Button type="success" style="width:140px" @click="login">登录</Button>
     </div>
   </div>
 </div>
</template>
<script>
import { login } from 'api'
export default {
  data () {
    return {
      formData: {},
      ruleDate: {
        username: [
          { required: true, message: '请填写用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请填写密码', trigger: 'blur' },
          { type: 'string', min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
        ]
      }
    }
  },
  created() {

  },
  mounted() {

  },
  methods: {
    login() {
      this.$refs['formData'].validate((valid) => {
        if (valid) {
          login(this.formData).then(res => {
            let userInfo = JSON.stringify(res)
            localStorage.setItem('userInfo', userInfo)
            this.$Message.success('登录成功！')
            this.$router.push({
              path: 'index',
            })
          })
        }
      }) 
    }
  },
}
</script>
<style lang='less' scoped>
</style>